.#{$namespace}-header {
  &.header__maia-default {
    color: var(--maia-menu-text-color);
    background: var(--maia-color-main-grey);
    // box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.03), inset 0px -1px 0px var(--maia-color-grey-2);
    .maia-system-title {
      color: var(--#{$namespace}-text-color-primary);
    }

    // 横向菜单
    .#{$namespace}-menu--horizontal {
      &.#{$namespace}-menu {
        border-bottom: none !important;
      }
      .#{$namespace}-menu-item,
      .#{$namespace}-sub-menu__title {
        height: var(--#{$namespace}-menu-horizontal-height);
      }

      .#{$namespace}-sub-menu {
        &.is-opened {
          &.is-active {
            font-weight: var(--#{$namespace}-font-weight-primary);
            color: var(--maia-menu-active-text-color);
            .#{$namespace}-sub-menu__title {
              color: var(--maia-menu-active-text-color);

              &::before {
                @include horizontal-common-active;
              }
            }
          }
        }
      }
    }

    // 顶部导航中的面包屑
    .#{$namespace}-breadcrumb {
      .#{$namespace}-breadcrumb__item {
        .#{$namespace}-breadcrumb__inner {
          color: var(--maia-menu-text-color);

          a {
            color: var(--maia-menu-text-color);
          }
        }
        .#{$namespace}-breadcrumb__separator {
          color: var(--maia-menu-text-color);
        }
      }
    }
    // 右侧dropDown
    .#{$namespace}-dropdown {
      .username {
        color: var(--maia-menu-text-color);
      }
    }
  }

  &.header__maia-blue {
    background: linear-gradient(90.08deg, #0f76f5 0%, #3f91f7 100%);
  }

  &.header__maia-cerulean {
    background: linear-gradient(90.08deg, #4369eb 0%, #3d67d2 100%);
  }

  &.header__maia-indigo {
    background: linear-gradient(90.08deg, #33476f 0%, #395a84 100%);
  }

  &.header__maia-orange {
    background: linear-gradient(90.27deg, #f76600 0%, #fa7d00 100%);
  }

  &.header__maia-blue,
  &.header__maia-cerulean,
  &.header__maia-indigo,
  &.header__maia-orange {
    color: var(--#{$namespace}-color-white);
    // box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.03), inset 0px -1px 0px var(--maia-color-grey-2);

    .maia-system-title {
      color: var(--#{$namespace}-color-white);
    }

    // 横向菜单
    .#{$namespace}-menu--horizontal {
      &.#{$namespace}-menu {
        border-bottom: none !important;
      }
      .#{$namespace}-sub-menu {
        .#{$namespace}-menu-item {
          color: var(--maia-menu-horizontal-text-color-sub);
        }
      }
      .#{$namespace}-menu-item,
      .#{$namespace}-sub-menu__title {
        height: var(--#{$namespace}-menu-horizontal-height);
        color: var(--maia-menu-horizontal-text-color-sub);
      }
      .#{$namespace}-menu-item {
        &.is-active {
          font-weight: var(--#{$namespace}-font-weight-primary);
          color: var(--#{$namespace}-color-white);

          &::before {
            @include sub-horizontal-common-active;
          }
        }
      }
      .#{$namespace}-sub-menu {
        &:not(.is-opened) {
          &.is-active {
            font-weight: var(--#{$namespace}-font-weight-primary);
            color: var(--#{$namespace}-color-white);
            .#{$namespace}-sub-menu__title {
              color: var(--#{$namespace}-color-white);

              &::before {
                @include sub-horizontal-common-active;
              }
            }
          }
        }

        &.is-opened {
          &.is-active {
            font-weight: var(--#{$namespace}-font-weight-primary);
            color: var(--#{$namespace}-color-white);
            .#{$namespace}-sub-menu__title {
              color: var(--#{$namespace}-color-white);

              &::before {
                @include sub-horizontal-common-active;
              }
            }
          }
        }
      }
    }

    // 顶部导航中的面包屑
    .#{$namespace}-breadcrumb {
      .#{$namespace}-breadcrumb__item {
        .#{$namespace}-breadcrumb__inner {
          color: var(--#{$namespace}-color-white);

          a {
            color: var(--#{$namespace}-color-white);
          }
        }
        .#{$namespace}-breadcrumb__separator {
          color: var(--#{$namespace}-color-white);
        }
      }
    }

    // 当前登录账号信息
    .#{$namespace}-dropdown {
      .username {
        color: var(--#{$namespace}-color-white);
      }
    }
  }
}
